<template>
  <div>
      <brand></brand>
      <div id="box2">
      <div>选择专业：<select name="" id="" v-model="subjectId">
              <option value="">请选择</option>
              <option :value="item._id" v-for="item in subjects" :key="item._id">{{item.name}}</option>
          </select>
      </div>
      <div>班级名称：<input type="text" class="input" v-model="classesName"></div>
      <div><button @click="addClasses()">确认添加</button><button class="cancel">取消</button></div>
      </div>
  </div>
</template>

<script>
import brand from '../common/brand.vue'

export default {
	components:{
		brand
	},
    created(){
        this.getSubjects();
    },
    data() {
        return {
            subjects:[],
            subjectId:'',
            classesName:''
        }
    },
    methods: {

        //获取专业
        async getSubjects(){
           const {data} = await this.$api.subjects.getSubjects();
           console.log(data.data.rows);
           this.subjects = data.data.rows;
        },

        //新增班级
        async addClasses(){
            if(this.subjectId==''||this.classesName==''){
                alert('信息不能为空！');
            }else{
                const {data} = await this.$api.classes.addClasses(this.classesName,this.subjectId);
                console.log(data);
                if(data.code){
                    alert('新增班级成功！');
                }
            }
        }

    },
}
</script>

<style scoped lang='scss'>
h2{
  margin: 0;
  margin-bottom: 20px;
}
#box2{
    padding-left: 50px;
    >div{
        margin: 20px 0;
        .input{
            width: 350px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
        input:focus{
        border: 1px solid #2f54eb;
        box-shadow:  0px 0px 0 1px #BDE7FF, 0px 0px 0 1px #BDE7FF;
        }
        button{
            width: 100px;
            height: 40px;
            background-color: #2f54eb;
            outline: none;
            border: none;
            color: #fff;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            &:hover{
                background-color: #5976ef;
            }
        }
        .cancel{
            background-color: #ffffff;
            border: 1px solid #dcdfe6;
            color: #000;
            margin-left: 20px;
            &:hover{
                background-color: #eaeefd;
                color: #2f54eb;
            }
        }
        &:last-child{
            margin-top: 20px;
        }
        select{
            width: 360px;
            height: 36px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            padding: 0;
            padding-left: 10px;
            margin: 0;
            outline: none;
        }
    }
}
</style>